<template>
	<div class="interfaceList-select-wrapper">
		<div v-if="typeSelect === 'sceneTransfer'">
			<el-form-item label="场景ID" :prop="prop" :required="required">
				<el-select :value="value" :disabled="showDetail" class="form-select" placeholder="请选择目标场景ID" @change="onChange">
					<el-option v-for="item in sceneIdList" :key="item.id" :label="item.name" :value="item.id"></el-option>
				</el-select>
			</el-form-item>
		</div>
		<div v-if="typeSelect === 'sendForm'">
			<el-form-item label="选择表单" :prop="prop" :required="required">
				<el-select :value="value" :disabled="showDetail" placeholder="请选择表单" multiple @change="onChange" class="formSelect" ref="sendForm">
					<el-option v-for="item in wordsFormList" :key="item.formTemplate.id" :label="item.formTemplate.name" :value="item.formTemplate.id"></el-option>
				</el-select>
			</el-form-item>
		</div>
		<div v-if="typeSelect === 'sendDeposition'">
			<el-form-item label="选择抄录证言" :prop="prop" :required="required">
				<el-select :value="value" :disabled="showDetail" placeholder="请选择抄录证言" @change="onChange">
					<el-option v-for="item in depositionOption" :key="item.id" :label="item.message" :value="item.id"> </el-option>
				</el-select> </el-form-item
		></div>
		<div v-if="typeSelect === 'collectShortVideo'">
			<el-form-item label="采集时长" :prop="prop" :required="required">
				<el-select :value="value" :disabled="showDetail" placeholder="请选择采集时长" @change="onChange" class="formSelect">
					<el-option v-for="item in listOptions" :key="item.label" :label="item.label" :value="item.time"></el-option>
				</el-select>
			</el-form-item>
		</div>
		<div v-if="typeSelect === 'inviteHumanThreeParties'">
			<el-form-item :label="prop === 'inviteMediaType' ? '通话模式' : '麦克风状态'" :prop="prop" :required="required">
				<el-select :value="value" :disabled="showDetail" placeholder="请选择" @change="onChange" class="formSelect">
					<el-option v-for="item in listOptions" :key="item.label" :label="item.label" :value="item.type"></el-option>
				</el-select>
			</el-form-item>
		</div>
		<div v-if="typeSelect === 'interfaceCall'">
			<el-form-item label="调用方式" :prop="prop" :required="required">
				<el-select :value="value" :disabled="showDetail" placeholder="请选择调用方式" @change="onChange" class="formSelect">
					<el-option v-for="item in listOptions" :key="item.label" :label="item.label" :value="item.value"></el-option>
				</el-select>
			</el-form-item>
		</div>
		<div v-if="typeSelect === 'skillGroup'">
			<el-form-item label="指定技能组" :prop="prop" :required="required">
				<el-select :value="getSelectGroup" :disabled="showDetail || !bizSceneId" multiple :placeholder="placeholder" @change="onChange" class="skill-group-select" ref="skillGroup">
					<el-option v-for="item in groupList" :key="item.id" :label="item.name" :value="item.id"> </el-option>
				</el-select>
			</el-form-item>
			<el-form-item v-if="values.length > 0 && groupList.length > 0 && getValuesLabel.length > 0" label="分组链规则">
				<span class="skill-group-label">{{ getValuesLabel }}</span>
			</el-form-item>
		</div>
	</div>
</template>

<script>
import { getAllBusinessScenceList, getBizscenariosBindForm, getTestimonyList, getBizscenariosInfo } from '@/api/api.js';
export default {
	props: {
		listOptions: {
			type: Array,
			default: () => [],
			required: true
		},
		prop: {
			type: String,
			default: () => ''
		},
		value: {
			type: String,
			required: true,
			default: () => ''
		},
		typeSelect: {
			type: String,
			default: () => ''
		},
		required: {
			type: Boolean,
			default: () => false
		},
		showDetail: {
			type: Boolean,
			default: () => false
		},
		values: {
			type: Array,
			default: () => []
		},
		bizSceneId: {
			type: String,
			default: () => ''
		},
		placeholder: {
			type: String,
			default: () => '请选择要技能组'
		},
	},
	data() {
		return {
			sceneIdList: [], //业务场景列表数据
			wordsFormList: [], ///表单数据
			//业务场景传过来的id
			scenarioId: JSON.parse(sessionStorage.getItem('sceneData'))?.id || this.$route.query.bizscenariosId,
			depositionOption: [],
			groupList: [], // 技能组列表
		};
	},
	watch: {
		bizSceneId(newVal) {
			if (newVal) {
				if (this.typeSelect === 'skillGroup') {
					this.$emit('onChange', this.prop, this.values);
					this.getGroupsDetails();
				}
			}
		},
		value(newVal) {
			console.log('watch value', newVal);
			if (this.typeSelect === 'sceneTransfer') {
				this.initBusinessScenceList();
			} else if (this.typeSelect === 'sendForm') {
				this.initBindForm();
			} else if (this.typeSelect === 'sendDeposition') {
				this.getTestimonyList();
			} else if (this.typeSelect === 'skillGroup' && this.bizSceneId) {
				this.getGroupsDetails();
			}
		}
	},
	computed: {
		getValuesLabel() {
			const values = this.values.filter(item => item && item.id) || [];
			const filter = values.filter(item => this.groupList.find(v => v.id === item.id)) || [];
			return filter.map(item => this.groupList.find(v => v.id === item.id) && item.name).join(', ');
		},
		getSelectGroup() {
			const values = this.values.filter(item => item && item.id) || [];
			return values.map(item => this.groupList.find(v => v.id === item.id) && item.id);
		}
	},
	mounted() {
		if (this.typeSelect === 'sceneTransfer') {
			this.initBusinessScenceList();
		} else if (this.typeSelect === 'sendForm') {
			this.initBindForm();
		} else if (this.typeSelect === 'sendDeposition') {
			this.getTestimonyList();
		} else if (this.typeSelect === 'skillGroup' && this.bizSceneId) {
			this.getGroupsDetails();
		}
	},
	methods: {
		onChange(value) {
			if (this.typeSelect === 'sceneTransfer') {
				const name = this.sceneIdList.find(item => item.id === value).name;
				// console.warn(name, 'name::', value);
				this.$emit('input', this.prop, value);
				this.$emit('input', 'bizSceneName', name);
			} else if (this.typeSelect === 'skillGroup') {
				this.$nextTick(() => {
					const groups = value.map(item => this.groupList.find(v => v.id === item));
					this.$emit('onChange', this.prop, groups);
					if (this.groupList.length === 1) {
						this.$refs.skillGroup.blur();
					}
				});
			} else if (this.typeSelect === 'sendForm') {
				this.$nextTick(() => {
					const forms = value.filter(item => this.wordsFormList.find(v => v.formTemplate.id === item));
					this.$emit('onChange', this.prop, forms);
					if (this.wordsFormList.length === 1) {
						this.$refs.sendForm.blur();
					}
				});
			} else {
				this.$emit('input', this.prop, value);
			}
		},
		// 获取业务场景列表
		initBusinessScenceList() {
			getAllBusinessScenceList()
				.then(res => {
					console.log(res.data, '场景列表数据');
					this.sceneIdList = res.data.scenList.filter(item => item.id !== this.scenarioId);
					console.log(this.sceneIdList, 'sceneIdList');
					if (this.value) {
						const name = this.sceneIdList.find(item => item.id === this.value).name;
						this.$emit('input', 'bizSceneName', name);
					}
				})
				.catch(err => {
					console.log(err);
					this.$message.error('获取场景ID列表失败');
				});
		},
		onChangeScenName(value) {
			// eslint-disable-next-line vue/no-mutating-props
			this.value = this.sceneIdList.find(item => item.id === value).name;
		},
		// 获取表单列表数据
		initBindForm() {
			getBizscenariosBindForm(this.scenarioId)
				.then(res => {
					console.log(res);
					this.wordsFormList = res.data.result || [];
					console.log(this.wordsFormList);
				})
				.catch(() => {
					this.$message.error('获取表单列表失败');
				});
		},
		// 获取证言插入下拉框列表
		async getTestimonyList() {
			try {
				// const bizscenarioId = JSON.parse(sessionStorage.getItem('sceneData')).id;
				const { data } = await getTestimonyList(this.scenarioId);
				console.log(data, 'getTestimonyList success');
				if (data.code === 200) {
					this.depositionOption = data.message || [];
				}
			} catch (error) {
				console.log(error, 'getTestimonyList error');
				this.$message.error('获取证言数据失败');
				this.$requestApiError(error, () => {
					this.$router.push('/');
				});
			}
		},
		// 获取技能组列表
		getGroupsDetails() {
			this.groupList = [];
			getBizscenariosInfo(this.bizSceneId)
				.then(res => {
					if (res.data.details && res.data.details.agentGroup) {
						this.groupList = res.data.details.agentGroup.map(item => {
							return {
								name: item.name,
								id: item.id,
							};
						}) || [];
						// 如果当前业务场景下没有技能组，则清空技能组
						if (this.groupList.length === 0) {
							this.$emit('input', this.prop, []);
						} else {
							const values = this.values.filter(item => item && item.id) || [];
							let found = values.map(item => this.groupList.find(v => v.id === item.id) && item.id) || [];
							found = found.filter(item => item);
							console.log('found ', found, values);
							if (found.length === 0 || found === [undefined] || found.length !== values.length)  {
								this.$emit('input', this.prop, []);
							}
						}
					} else {
						this.$message.warning('当前业务场景下没有技能组');
					}
				})
				.catch(() => {
					this.$message.error('获取技能组列表失败');
				});
		},
	}
};
</script>

<style scoped>
.skill-group-label {
	width: calc(100% - 54px);
    display: block;
	max-height: 60px;
	overflow-y: auto;
	border-radius: 4px;
    border: 1px solid #DCDFE6;
    line-height: 28px;
    padding: 0 8px;
	box-sizing: border-box;
}
</style>

<style lang="less">
.skill-group-select {
	max-height: 58px;
	.el-select__tags {
			max-height: 100%;
			overflow-y: auto;
		}
}
</style>
